body {
    background-color: var(--themeColor);
}

.main {
    padding-bottom: 3rem;

    .img-top {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        color: #fff;
    }

    .search {
        height: 0.68rem;
        background: var(--ff);
        border-radius: 0.34rem;

        padding: 0 .07rem 0 .21rem;

        .icon {
            width: .3rem;
            height: .3rem;
            margin-right: .1rem;
        }

        .search-btn {
            padding: .1rem .2rem;
            background: linear-gradient(to right, var(--bd1), var(--bd));
            border-radius: .34rem;
            color: #fff;
            border: none;
            font-size: var(--default-font-size-28);
        }

        .inp {
            font-size: var(--default-font-size-28);
        }

    }

    .carousel {
        padding: .3rem 0;
        height: 3.4rem;

        .layui-carousel {
            height: 3.4rem !important;
            border-radius: .20rem !important;
            background-color: transparent;

            > div[carousel-item] {
                border-radius: .20rem !important;
            }
        }

        .layui-carousel > [carousel-item] > * {
            background-color: transparent;
        }
    }

    .carousel .layui-carousel > div[carousel-item] img {
        width: 100%;
        height: 100%;
    }


    .capsule{
        width: 100%;
    }


    .layui-carousel-ind {
        top: -25px;
    }

    .layui-carousel-ind ul {
        background-color: initial;
    }

    .layui-carousel-ind ul li {
        width: .09rem;
        height: .09rem;
    }

    .news-carousel {
        background-color: var(--ff);
        padding: .2rem;
        height: .5rem;
        line-height: .5rem;
        position: relative;

        .icon {
            width: .4rem;
            height: .4rem;
        }

        .car {
            margin-left: .2rem;
            width: 90%;

            .gray {
                font-size: .24rem;
                color: var(--c9);
                position: absolute;
                top: 50%;
                right: .2rem;
                transform: translateY(-50%);
            }
        }

        .layui-carousel {
            height: .4rem !important;
            line-height: .45rem !important;

            > [carousel-item] > * {
                background-color: #fff;
                font-size: var(--default-font-size-26);
                color: var(--dcl);
            }
        }
    }

}

.category-container {
    display: flex;
    flex-wrap: wrap;
    padding: .1rem 0;
    background-color: var(--ff);
    border-radius: .20rem;
}

.category-item {
    margin: .2rem;
    box-sizing: border-box;
    text-align: center;
}

.category-item img {
    width: .86rem;
    height: .86rem;
    border-radius: 50%
}

.category-item .category-text {
    margin-top: .18rem;
    font-size: .24rem;
    color: var(--dcl);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.l1r2 {
    .vessel {
        height: 4.4rem;
        gap: .2rem;

        .item {
            padding: .2rem;

            .title {
                font-weight: 500;
                font-size: .30rem;
                color: var(--dcl);
            }

            .desc {
                font-weight: 400;
                font-size: .22rem;
                color: var(--c9);
                margin: .1rem 0;
                z-index: 99;
            }

            .go {
                background: #FAECED;
                border-radius: .20rem;
                font-size: .24rem;
                color: #EC1B24;
                padding: .09rem .09rem .08rem .09rem;

                > i {
                    font-size: .24rem;
                }
            }

        }

        .left {
            background-color: var(--ff);
            height: 100%;
            width: 50%;
            box-sizing: border-box;
            position: relative;
            .bg-icon {
                position: absolute;
                bottom: .2rem;
                right: .2rem;
                width: 2.42rem;
                height: 2.54rem;
            }
        }

        .right {
            gap: .2rem;
            height: 100%;
            width: 50%;
            box-sizing: border-box;

            .fast, .last {
                position: relative;
                height: 50%;
                background-color: var(--ff);
            }
            .desc{
                width: 60%;
            }
            .go {
                position: absolute;
                bottom: .2rem;
                left: .2rem;
            }

            .bg-icon {
                position: absolute;
                bottom: .2rem;
                right: .2rem;
                width: 1.33rem;
                height: 1.33rem;
            }
        }
    }
}

